<template>
  <div>
    <!-- 导航栏 -->
    <div class="nav">
      <el-button class="goback" @click="goback">
        <i class="el-icon-arrow-left">返回</i>
      </el-button>
      <div class="breadcrumb">
        <span>当前位置：</span>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/index/Patrol/Question' }" replace>巡视巡察</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/index/Patrol/Question' }" replace>问题清单</el-breadcrumb-item>
          <el-breadcrumb-item>问题清单详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <!-- 标题 -->
    <div class="menu_title">
      <div class="line"></div>
      <div>{{orgName}}{{nameOne}}</div>
      <div class="line"></div>
    </div>
    <!-- 基本信息 -->
    <div class="item_wrap">
      <div class="title_wrap">
        <div class="line"></div>
        <div class="title">基本信息</div>
      </div>
      <div class="content_wrap">
        <div class="base_item">
          <div class="key">联系人</div>
          <div class="value">{{contact}}</div>
        </div>
        <div class="base_item">
          <div class="key">联系方式</div>
          <div class="value">{{contactInfo}}</div>
        </div>
        <div class="base_item">
          <div class="key">完成进度</div>
          <div class="value">
            <span>{{completed}}</span>
            <span>/</span>
            <span>{{total}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 问题清单 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">问题清单</div>
        </div>
      </div>
      <div v-if="questionData.length == 0" class="note">暂无问题清单</div>
      <el-table v-else :data="questionData" border>
        <el-table-column type="index" label="序号" width="53px" align="center"></el-table-column>
        <el-table-column prop="category" label="问题分类" align="center" width="323px"></el-table-column>
        <el-table-column prop="name" label="问题清单"></el-table-column>
        <el-table-column prop="finalEndDate" label="整改完成时限" align="center" width="200px"></el-table-column>
      </el-table>
    </div>
    <!-- 问题清单附件 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">问题清单附件</div>
        </div>
      </div>
      <div v-if="fileList.length == 0" class="note">暂无附件</div>
      <div v-else class="fileList">
        <div v-for="(item, index) in fileList" :key="index">
          <div class="file_item">
            <img class="left" :src="pdf" alt />
            <div class="right">
              <div class="title">{{ item.name }}</div>
              <div class="done_wrap">
                <div class="size">{{ (item.size / 1024 / 1024).toFixed(1) + "M" }}</div>
                <div class="innerRight">
                  <div class="button" @click="prev(index)">
                    <img class="image1" :src="preview" alt />
                    <span>预览</span>
                  </div>
                  <span class="done">|</span>
                  <div class="button" @click="downl(index)">
                    <img class="image1" :src="download" alt />
                    <span>下载</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 整改过程 -->
    <div class="item_wrap">
      <div class="title_wrap hasbutton">
        <div class="left">
          <div class="line"></div>
          <div class="title">整改过程</div>
        </div>
      </div>
      <div class="abarbeitung_step" v-for="(item, index) in abarbeitungData" :key="index">
        <div class="abarbeitung_item">
          <div class="top" v-if="item.status == 1">
            <div class="step step1">
              <i class="el-icon-check"></i>
            </div>
            <span class="status">已完成</span>
          </div>
          <div class="top" v-if="item.status == 2">
            <div class="step step3">{{ ++index }}</div>
            <span class="status2">进行中</span>
          </div>
          <div class="top" v-if="item.status == 0">
            <div class="step step2">{{ ++index }}</div>
            <span class="status1">未完成</span>
          </div>

          <div
            class="line"
            :class="item.status == 0 ? 'drakLine' : 'lightLine'"
            v-if="!item.processReportList"
          ></div>
          <div class="reportInfo" :class="item.status == 1 ? 'lightLine' : 'drakLine'" v-else>
            <el-card v-for="(item1, index1) in item.processReportList" :key="index1">
              <div class="process_title">
                <div class="title">{{ item1.title }}</div>
                <el-button @click="reportDetail(item1.id)">汇报内容详情</el-button>
              </div>
              <div class="process_content">
                <div class="item">
                  <span class="padding">汇报周期：</span>
                  <span>{{ item1.startDate }}~{{ item1.endDate }}</span>
                </div>
                <div class="item">
                  <span class="padding">责任人：</span>
                  <span>{{ item1.person}}</span>
                </div>
                <div class="item">
                  <span class="padding">创建/编辑时间：</span>
                  <span>{{ item1.operatedTime }}</span>
                </div>
              </div>
              <div class="process_file">
                <div v-for="(item2, index2) in item1.attachList" :key="index2">
                  <div class="file_item">
                    <img class="left" :src="pdf" alt />
                    <div class="right">
                      <div class="title">{{ item2.name }}</div>
                      <div class="done_wrap">
                        <div class="size">{{ (item2.size / 1024 / 1024).toFixed(1) + "M" }}</div>
                        <div class="innerRight">
                          <div class="button" @click="prev(index)">
                            <img class="image1" :src="preview" alt />
                            <span>预览</span>
                          </div>
                          <span class="done">|</span>
                          <div class="button" @click="downl(index)">
                            <img class="image1" :src="download" alt />
                            <span>下载</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    <!-- 汇报内容详情 -->
    <el-dialog title="汇报详细内容" :visible.sync="dialogVisible" width="40%" top="30vh">
      <span>{{detailText}}</span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pdf: require("@/assets/image/pdf.png"),
      preview: require("@/assets/image/preview.png"),
      download: require("@/assets/image/download.png"),
      value: "",
      name: "",
      phone: "",
      orgName: "",
      nameOne: "",
      total: "",
      contactInfo: "",
      contact: "",
      completed: "",
      questionData: [],
      abarbeitungData: [],
      fileList: [],
      detailText: "",
      dialogVisible: false,
    };
  },

  created() {
    let id = this.$route.query.id;
    let role = this.$route.query.role;
    console.log(id, "11111111111111111111111");
    console.log(role, "222222222222222222222");
    if (role == "manage") {
      this.Api.detailQuestion({ id: id }).then((res) => {
        console.log(res, "333333333333333333333333333333");
        this.orgName = res.data.orgName;
        this.nameOne = res.data.name;
        this.contact = res.data.contact;
        this.contactInfo = res.data.contactInfo;
        this.completed = res.data.completed;
        this.total = res.data.total;
        this.questionData = res.data.listingList;
        this.fileList = res.data.attachList;
        this.abarbeitungData = res.data.processList;
        console.log(this.abarbeitungData);
      });
    } else if (role == "upload") {
      this.Api.uploadDetail({ id: id }).then((res) => {
        console.log(res, "333333333333333333333333333333");
        this.orgName = res.data.orgName;
        this.nameOne = res.data.name;
        this.contact = res.data.contact;
        this.contactInfo = res.data.contactInfo;
        this.completed = res.data.completed;
        this.total = res.data.total;
        this.questionData = res.data.listingList;
        this.fileList = res.data.attachList;
        this.abarbeitungData = res.data.processList;
        console.log(this.abarbeitungData);
      });
    }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    prev(index) {
      console.log("附件预览", index);
      console.log(this.fileList[index].url);
      // this.dialogVisible = true;
      this.fileUrl = this.fileList[index].url;
      this.baseUrl = this.$store.state.PortalManagement.fileIp;
      this.fileUrl = this.baseUrl + this.fileList[index].url;
      console.log(this.fileUrl);
      var win = window.open();
      win.document.write(
        '<body style="margin:0px;"><object data="' +
          this.fileUrl +
          '" type="application/pdf" width="100%" height="100%"><iframe src="' +
          this.fileUrl +
          '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
      );
    },
    downl() {
      console.log("附件下载");
    },
    reportDetail(id) {
      console.log(id);
      this.Api.textQuestion({ id: id }).then((res) => {
        this.detailText = res.data;
      });
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .goback {
    width: 70px;
    height: 36px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(221, 221, 221, 1);
    padding: 0;
  }
  .breadcrumb {
    display: flex;
    align-items: center;
  }
}
.menu_title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #333;
  font-weight: 500;
  line-height: 70px;
  text-align: center;
  .line {
    width: 30px;
    height: 2px;
    background-color: #333;
    margin: 0 10px;
  }
}
.item_wrap {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 10px;

  .title_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .line {
      width: 4px;
      height: 14px;
      background: #3d7fff;
    }
    .title {
      font-weight: 500;
      margin: 0 10px;
      font-size: 16px;
      color: #333;
    }
  }
  .content_wrap {
    display: flex;
    font-size: 14px;
    border-top: 1px solid rgba(232, 232, 232, 1);
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    border-right: 1px solid rgba(232, 232, 232, 1);
    height: 46px;
    width: 100%;
    line-height: 46px;
    color: #333;
    .base_item {
      width: 33.33%;
      display: flex;
    }
    .key {
      width: 140px;
      background: rgba(250, 250, 250, 1);
      border-right: 1px solid rgba(232, 232, 232, 1);
      border-left: 1px solid rgba(232, 232, 232, 1);
      padding: 0 10px;
      font-weight: 500;
    }
    .value {
      padding: 0 10px;
    }
  }
}
.hasbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
  }
  .el-button {
    width: 70px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(61, 127, 255, 1);
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3d7fff;
  }
}
.note {
  font-size: 14px;
  color: #999;
}
.classInput {
  /deep/.el-input__inner {
    text-align: center;
  }
}
.done {
  margin: 0 10px;
}
.time {
  display: flex;
  align-items: center;
}

.button_wrap {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 100px;
  right: 0;
  z-index: 99;
  text-align: right;
  padding: 10px 20px;
  .el-button {
    margin-left: 10px;
  }
}
.fileList {
  display: flex;
  flex-wrap: wrap;
}
.file_item {
  position: relative;
  background-color: #fff;
  width: 360px;
  height: 80px;
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  .left {
    width: 50px;
    height: 50px;
    margin-right: 15px;
  }
  .right {
    font-size: 14px;
    .title {
      width: 250px;
      color: #333;
      margin-bottom: 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    
      
    }
    .done_wrap {
      display: flex;
      align-items: center;
      .size {
        color: #999;
        margin-right: 110px;
      }
      .innerRight {
        text-align: right;
        color: #3d7fff;
        display: flex;
        align-items: center;
      }
    }
  }
  .button {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .del {
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
    position: absolute;
    right: 5px;
    top: 5px;
  }
}
.process_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  .el-button {
    width: 110px;
    height: 30px;
    border-radius: 4px;
    padding: 0;
    line-height: 30px;
    text-align: center;
    border: 1px solid #3d7fff;
    color: #3d7fff;
  }
}
.process_content {
  display: flex;
  margin: 20px 0;
  .item {
    margin-right: 60px;
    font-size: 14px;
    color: #333;
    .padding {
      padding-right: 5px;
    }
  }
}
.process_file {
  display: flex;
  flex-wrap: wrap;
}
.abarbeitung_step {
  &:last-child {
    .line {
      // border-left: 1px solid #fff!important;
      display: none;
    }
    .reportInfo {
      border-left: 1px solid #fff !important;
    }
  }
  .abarbeitung_item {
    .top {
      display: flex;
      align-items: center;
      .step {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        line-height: 32px;
        text-align: center;
        margin-right: 16px;
      }
      .step1 {
        color: #3d7fff;
        font-size: 24px;
        border: 1px solid #3d7fff;
      }
      .step3 {
        background-color: #3d7fff;
        color: #fff;
        font-style: 14px;
      }
      .step2 {
        border: 1px solid #cccccc;
        color: #cccccc;
        font-style: 14px;
      }
      .status {
        font-size: 16px;
        color: #666;
      }
      .status1 {
        font-size: 16px;
        color: #333;
        font-weight: 500;
      }
      .status2 {
        font-size: 16px;
        color: #999;
      }
    }
    .reportInfo {
      // margin: 10px 0;
      margin-left: 16px;
      padding-left: 30px;
    }
    .drakLine {
      border-left: 1px solid #ccc;
    }
    .lightLine {
      border-left: 1px solid #3d7fff;
    }
    .line {
      padding: 20px 0;
      margin: 10px 0;
      margin-left: 16px;
    }
  }
}
//     .abarbeitung_item:last-of-type .line {
//       border-left: none;
//     }
// .abarbeitung_item:last-child {
//   border-left: none;
// }
.el-card {
  margin: 20px 0;
}
/deep/.el-card__body {
  background-color: #f8f8f9;
}
/deep/.el-dialog__header {
  background-color: #e6e9ed;
}
/deep/.el-dialog__body {
  padding: 15px 40px 60px 40px;
}
</style>